<template>
<div class="detail-main">
    <el-card class="card">
        <div slot="header"></div>
        <div>
            <!-- 进度条 -->
            <el-steps :active="act">
                <el-step v-for="item in steps" :key="item.id" :title="item.name">{{item.name}}</el-step>
            </el-steps>
            
            <!-- 内容区 -->
            <div class="content">
                    <el-card >
                        <div slot="header">
                            <el-button type="primary">1、订单信息</el-button>
                        </div>
                        <div>
                            <el-row :gutter="0">
                                <el-col :span="6">
                                    <div class="grid-content title">
                                       订单编号
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">{{order.orderBase.id}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content title">用户账号</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">{{order.orderBase.memberUsername}}</div>
                                </el-col>
                            </el-row>
                             <el-divider></el-divider>
                             
                              <el-row :gutter="0">
                                <el-col :span="6">
                                    <div class="grid-content title">订单总价</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">
                                        <el-tag type="danger">{{order.orderBase.totalAmount}}</el-tag>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content title">订单状态</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">
                                        <el-tag type="warning" effect="dark" v-if="order.orderBase.status===0">待付款</el-tag>
                                        <el-tag type="warning" effect="dark" v-else-if="order.orderBase.status===1">已付款</el-tag>
                                        <el-tag type="warning" effect="dark" v-else-if="order.orderBase.status===2">已发货</el-tag>
                                        <el-tag type="warning" effect="dark" v-else-if="order.orderBase.status===3">已收货</el-tag>
                                        <el-tag type="warning" effect="dark" v-else>已关闭</el-tag>
                                    </div>
                                </el-col>
                            </el-row>
                             <el-divider></el-divider>
                               <el-row :gutter="0">
                                <el-col :span="6">
                                    <div class="grid-content title">创建时间</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">{{order.orderBase.createTime}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content title">修改时间</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">{{order.orderBase.modifyTime}}</div>
                                </el-col>
                            </el-row>
                             <el-divider></el-divider>

                           
                                
                             <!-- 订单支付类型 -->  
                              <el-row :gutter="0">
                                <el-col :span="6">
                                    <div class="grid-content title">订单类型</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content" v-if="order.orderBase.orderType===0">
                                        <el-tag type="success">正常订单</el-tag>
                                    </div>
                                    <div class="grid-content" v-else>
                                        <el-tag type="success">秒杀订单</el-tag>
                                    </div>
                                </el-col>
                                  <el-col :span="6">
                                    <div class="grid-content title">支付方式</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content" v-if="order.orderBase.payType===0">
                                        <el-tag type="success">未支付</el-tag>
                                    </div>
                                    <div class="grid-content" v-else-if="order.orderBase.payType===1">
                                        <el-tag type="success">微信</el-tag>
                                    </div>
                                    <div class="grid-content" v-else>
                                        <el-tag type="success">支付宝</el-tag>
                                    </div>
                                </el-col>
                            </el-row> 
                             <el-divider></el-divider>
                              <!-- 支付时间 和备注订单支付才显示 -->
                                <el-row :gutter="10">
                                      <el-col :span="6">
                                    <div class="grid-content title">支付时间</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">{{order.orderBase.paymentTime}}</div>
                                </el-col>
                                    <el-col :span="6">
                                    <div class="grid-content title">备注</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">{{order.orderBase.note}}</div>
                                </el-col>
                                </el-row>
                             <el-divider></el-divider>

                              <el-row :gutter="0">
                                <el-col :span="6">
                                    <div class="grid-content title">订单来源</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content" v-if="order.orderBase.sourceType===0">
                                        <el-tag type="success">PC订单</el-tag>
                                    </div>
                                    <div class="grid-content" v-else>
                                        <el-tag type="success">APP订单</el-tag>
                                    </div>
                                </el-col>
                            </el-row>
                             <el-divider></el-divider>
                              

                             
                           
                        </div>
                    </el-card>
                    <!-- 用户信息 -->
                    <el-card style="margin-top:10px;">
                         <div slot="header">
                            <el-button type="success">2、用户信息</el-button>
                        </div>
                        <div>
                             <el-row :gutter="10">
                                <el-col :span="6">
                                    <div class="grid-content title">用户id</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">{{order.orderBase.memberId}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content title">用户名</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">{{order.orderBase.memberUsername}}</div>
                                </el-col>
                            </el-row>
                             <el-divider></el-divider>

                               <el-row :gutter="10">
                                <el-col :span="6">
                                    <div class="grid-content title">收货地址</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">{{order.orderBase.receiverDetailAddress}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content title">收货人</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">{{order.orderBase.receiverName}}</div>
                                </el-col>
                            </el-row>
                             <el-divider></el-divider>
                               <el-row :gutter="10">
                                <el-col :span="6">
                                    <div class="grid-content title">收货电话</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">{{order.orderBase.receiverPhone}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content title">收货人</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">{{order.orderBase.receiverName}}</div>
                                </el-col>
                            </el-row>
                             <el-divider></el-divider>
                             
                                <!-- 订单支付的时候才会显示的 -->
                                <el-row :gutter="0" v-if="order.orderBase.status>0">
                                  <el-col :span="6">
                                    <div class="grid-content title">支付金额</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content">{{order.orderBase.payAmount}}</div>
                                </el-col>
                            </el-row> 
                             <el-divider></el-divider>

                        </div>
                    </el-card>
                     <el-card style="margin-top:10px;">
                         <div slot="header">
                            <el-button type="warning">3、商品信息</el-button>
                        </div>
                        <div>
                            <el-table
                                :data="order.orderItems"
                                style="width: 100%">
                                <el-table-column
                                    width="60"
                                    label="序号"
                                    type="index">
                                </el-table-column>
                                  <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="orderSn"
                                    label="订单编号" >
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="productName"
                                    label="商品名称" >
                                </el-table-column>
                                 <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="productBrand"
                                    label="商品品牌" >
                                </el-table-column>
                                 <el-table-column
                                    header-align="center"
                                    align="center"
                                    width="120"
                                    label="图片" >
                                    <template slot-scope="scope"><img :src="scope.row.productPic" alt="sorry"></template>
                                </el-table-column>
                                 <el-table-column
                                    header-align="center"
                                    align="center"
                                    label="商品规格" >
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.productAttr"> 颜色:{{scope.row.productAttr[0].value}}</div>
                                        <div v-if="scope.row.productAttr">大小:{{scope.row.productAttr[1].value}}</div>
                                    </template>
                                </el-table-column>
                                  <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="productQuantity"
                                    label="商品数量" >
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="productPrice"
                                    label="商品单价" >
                                </el-table-column>
                                 <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="totalPrice"
                                    label="商品总价" >
                                </el-table-column>
                                  <el-table-column fixed="right" label="操作" width="140" class="btns" header-align="center" align="center" >
                    <template slot-scope="scope">
                        <el-button type="danger" v-show="act===2"  @click="confirmSendGoods(scope.row)">确认发货</el-button>
                        <el-button type="danger" v-show="act===3" disabled>已发货</el-button>
                        <el-button type="danger" v-show="act===4" @click="closeOrder(scope.row)" >关闭订单</el-button>
                    </template>
                </el-table-column>
                            </el-table>
                        </div>
                    </el-card>

            </div>
        </div>
    </el-card>

</div>
</template>

<script>
import {
    orderDetail,
    finishOrder,
    receiveProductsForce,
    sendDone
} from '@/api/order/index'

export default {
    components: {

    },
    data() {
        return {
            // 订单id
            id: '',
            order: {
                orderBase: {},
                orderItems: []
            },
            // 进度条

            act: 1,
            steps: [{
                    name: '待付款',
                    id: 0
                },
                {
                    name: '待发货',
                    id: 1
                },
                {
                    name: '已发货',
                    id: 2
                },
                {
                    name: '已完成',
                    id: 3
                },
                {
                    name: '已关闭',
                    id: 4
                }
            ]

        };
    },
    computed: {

    },
    created() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id
            this.init()
        }

    },
    mounted() {

    },
    methods: {
        init() {
            orderDetail(this.id).then(res => {
                console.log(res);
                if (res.success) {
                    this.act = res.data.orderDetail.orderBase.status + 1
                        
                        res.data.orderDetail.orderItems.forEach(el=>{
                            el.productAttr=JSON.parse(el.productAttr)
                        })
                    this.order = res.data.orderDetail

                }
            })

        },
        next() {
            if (this.act++ > 4) this.act = 1;
        },
        // 前进
        prev() {
            if (this.act > 1) {
                this.act--
            }
        },
        // 确认发货
        confirmSendGoods(row){
              this.$confirm('确认您已经发货了吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            // 订单id 订单编号 物流公司名称
            let data={
                orderId:row.orderId,
                orderSn:row.orderSn,
                deliverySn:'申通快递'
            }
            sendDone(data).then(res=>{
                console.log(res);
                if(res.success){
                    this.$message.success('已成功提交该商品发货状态')
                    // 商品变为已发货状态
                   this.init()
                }else{
                    this.$message.error('该商品发货失败!!!')
                }
            })
          


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发货'
          });          
        });

        },
        // 关闭订单
        closeOrder(row){
            finishOrder(row.orderId).then(res=>{
                if(res.success){
                    this.$message.success('已经成功关闭该订单')
                   this.init()
                }else{
                    this.$message.error('关闭订单失败!!!')

                }
            })

        }

    },
};
</script>

<style lang="scss" scoped>
.card {
    margin: 20px;

}

.content {
    margin-top: 20px;
  .grid-content {
            color: #999;
            border-radius: 4px;
            min-height: 30px;
            line-height: 30px;
            margin-left: 5px;
            text-align: center;
        }
        .grid-content.title{
             font-weight: bolder;
             
            }
        img{
            width: 120px;
            height: 120px;
        }
       
       
       

  
}
</style>
